<!--
 * @Description:
 * @Author: hanchaoxian
 * @Date: 2022-06-07 15:26:00
 * @LastEditors: hanchaoxian
-->
<template>
  <cj-popup v-model="isShowTeamNumber" position="bottom" get-container="body">
    <div class="c-bg-white c-br-tr20 c-br-tl20 c-text-hidden">
      <header class="c-w100 c-bg-white c-pt40 c-flex-row c-aligni-center c-p">
        <span class="c-fs28 c-fw600 c-flex-grow1 c-w0 c-textAlign-c">批量选择</span>
        <i class="iconfont c-fs20 c-fc-sgray c-hh76 c-ww76 c-flex-row c-flex-center c-pa c-p-t0 c-p-r0" @click="isShowTeamNumber=false">&#xeca0;</i>
      </header>
      <div class="c-ph14 c-bg-white c-hh500 c-content-scroll">
        <div v-for="(item,index) in numberarr" :key="index" @click="chooseNumberArr(index,item)" :class="pageIndex==index?'theme-bd1 theme-fc c-p':'c-bd1-f5'" class="c-inlineblack c-mt20 c-mh10 c-pv16 c-ww184 c-bg-f5 c-br10 c-textAlign-c c-fs24">
          {{item}}
          <div v-if="pageIndex==index" class="iconfont c-fs24 theme-fc c-pa rightIcon c-bg-white c-brp50">&#xe82e;</div>
        </div>
      </div>
      <div class="c-ww592 c-center c-mt20 theme-bg c-fc-white c-br32 c-fs24 c-pv16 c-textAlign-c c-mb10" @click="sureTeamNumber">确认批量选择({{chooseNumber}})</div>
    </div>
  </cj-popup>
</template>
<script>
export default {
  name: 'SignIn',
  components: {
  },
  props: {
    numberSection: {//区间数值
      type: Number,
      default: 101
    },
    isShowTeamNumber: {//是否显示选择区间
      type: Boolean,
      default: false
    },
    pageIndex: {
      type: Number,
      default: 0
    },
    chooseNumber: { //选中的区间
      type: String,
      default: ""
    },
    intervalPage: { //初始页数
      type: Number,
      default: 1
    }
  },
  watch: {
    isShowTeamNumber(val) {
      if (val) {
        this.calculation()
      } else {
        this.numberarr = []
        this.pageIndex = 0
        this.$emit('closeTeamNumber')
      }
    }
  },
  mounted() {
  },
  data() {
    return {
      numberarr:[], //区间数组
      page:0,
    };
  },
  created() {},
  methods: {
    // 计算页数与区间数组
    calculation() {
      let pageNumber = Math.ceil(this.numberSection / 100)
      for (let i = 1;i <= pageNumber;i++) {
        let arrNum = ''
        if (i * 100 <= this.numberSection) {
          arrNum = ((i - 1) * 100 + 1) + '-' + i * 100
          this.numberarr.push(arrNum)
        } else if (((i - 1) * 100 + 1) == this.numberSection) {
          arrNum = this.numberSection
          this.numberarr.push(arrNum)
        } else {
          arrNum = ((i - 1) * 100 + 1) + '-' + this.numberSection
          this.numberarr.push(arrNum)
        }
      }
      if (!this.chooseNumber) {
        this.chooseNumber = this.numberarr[0];
        if (String(this.numberarr[0]).indexOf("-") != -1) {
          this.page = Math.ceil(String(this.numberarr[0]).split("-")[0] / 100)
        } else {
          this.page = Math.ceil(this.numberarr[0] / 100)
        }
      } else {
        this.page = this.intervalPage;
      }
    },
    //区间选择
    chooseNumberArr(index, item) {
      this.pageIndex = index
      this.chooseNumber = item
      if (String(this.numberarr[index]).indexOf("-") != -1) {
        this.page = Math.ceil(String(this.numberarr[index]).split("-")[0] / 100)
      } else {
        this.page = Math.ceil(this.numberarr[index] / 100)
      }
    },
    //确认区间
    sureTeamNumber() {
      this.isShowTeamNumber = false;
      this.$emit("sureTeamNumber", this.page, this.chooseNumber, this.isShowTeamNumber, this.pageIndex)
    }
  }
};
</script>
<style scoped lang="scss">
.rightIcon{
  right: -0.15rem;
  top: -0.15rem;
}
</style>
